<!--客户表单-->
<template>
  <div class="contain">
    <app-header></app-header>
    <!-- <router-link :to="{ path: '/desc', query: { url: 'customer' }}" class="tip-pc"><i class="iconfont icon-pc"></i>用PC端轻松完成客户批量导入</router-link> -->
    <div class="form-wrap">
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">
            <span class="red">*</span>公司名称</div>
          <div class="ipt flex1"><input type="text" placeholder="点击输入" v-model="cusName" /></div>
        </div>
      </div>
      <div class="form-choice line">
        <x-address title="所在地区" v-model="addrvalue" :list="addressData" value-text-align="left" placeholder="点击选择"></x-address>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">详细地址</div>
          <div class="ipt flex1">
            <textarea class="form-txtarea" type="text" placeholder="请输入详细的街道地址" v-model="Address"></textarea>
          </div>
        </div>
      </div>
      <div class="form-choice line">
        <popup-picker class="vux-form-require" title="客户类型" placeholder="点击选择" value-text-align="left" :data="customTypeList" :show-name="customTypeshow" v-model="customType"></popup-picker>
      </div>
      <div class="form-choice" v-if="customType[0] == '1'">
        <popup-picker title="医院等级" placeholder="点击选择" value-text-align="left" :data="list2" :show-name="value2show" v-model="value2"></popup-picker>
      </div>
    </div>

    <h2 class="form-tit-row">公司联系人</h2>
    <div class="form-wrap">
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">
            <span class="red">*</span>联系人</div>
          <div class="ipt flex1"><input type="text" placeholder="点击输入" v-model="LinkMan" /></div>
        </div>
      </div>
      <div class="form-wrap-row">
        <div class="line displayflex">
          <div class="label">
            <span class="red">*</span>联系电话</div>
          <div class="ipt flex1"><input type="text" placeholder="点击输入" v-model="ContactTel" /></div>
        </div>
      </div>
    </div>
    <uploader :title="'公司照片'" :img-list="imgList" :max="maxPic" :view-only="false"></uploader>

    <div class="form-btn" @click="CreateCus">提交</div>
  </div>
</template>

<script>
import appHeader from '@/components/core/header/app_header.vue';
import uploader from '@/components/share/imageUploader/imageUploader.vue';

export default {
  components: {
    appHeader,
    uploader
  },
  data() {
    return {
      addrvalue: [],
      addressData: this.ChinaAddressV3Data,
      cusName: "",
      Address: "",
      LinkMan: "",
      ContactTel: "",
      //等级
      value2show: true,
      value2: [],
      list2: [
        [
          {
            value: "1",
            name: "一级"
          },
          {
            value: "2",
            name: "二级"
          },
          {
            value: "3",
            name: "三级"
          }
        ],
        [
          {
            value: "1",
            name: "甲等"
          },
          {
            value: "2",
            name: "乙等"
          },
          {
            value: "3",
            name: "丙等"
          }
        ]
      ],
      //客户类型
      customTypeshow: true,
      customType: [],
      customTypeList: [
        [
          {
            value: "1",
            name: "医院"
          },
          {
            value: "4",
            name: "公司"
          }
          
        ]
      ],
      //图片
      imgList: [],
      maxPic: 9,
      //客户名称 modi by lxf
      OrgName: "",
      list:[],
    };
  },
  watch:{
  },

  methods: {
    checkForm() {
      if (!this.cusName) {
        this.Toast({
          message: "请输入公司名称"
        });
        return false;
      }
      if (!this.customType[0]) {
        this.Toast({
          message: "请选择客户类型"
        });
        return false;
      }
      if (!this.LinkMan) {
        this.Toast({
          message: "请输入联系人"
        });
        return false;
      }
      var testTel = /^1[345789]\d{9}$/;
      if (!this.ContactTel || !testTel.test(this.ContactTel)) {
        this.Toast({
          message: "请输入正确格式的手机号"
        });
        return false;
      }
      return true;
    },

    CreateCus() {
      if (!this.checkForm()) {
        return false;
      }
      if (this.customType[0] == "4") {
        this.value2[0] = "";
        this.value2[1] = "";
      }
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var guid = this.$route.query.Guid;
      var query = {
        OrgName: this.OrgName,
        Name: this.cusName,
        LinkMan: this.LinkMan,
        ContactTel: this.ContactTel,
        Address: this.Address,
        TenantGUID: userinfo.TenantGUID,
        CorpGuid: userinfo.CorpGuid,
        CorpName: userinfo.CorpName,
        OrgRank: this.value2[0],
        OrgGrade: this.value2[1],
        Province: this.addrvalue[0],
        City: this.addrvalue[1],
        District: this.addrvalue[2],
        CreateUserId: userinfo.StaffID,
        CreateUserName: userinfo.Name,
        ImageArray: self.imgList,
        OrgType: this.customType[0]
      };
      var methods = "",
        successMsg = "";

      if (guid) {
        methods = "UpdateMfmed";
        query.Guid = guid;
        successMsg = "保存成功";
      } else {
        methods = "CreateMfmed";
        successMsg = "新增成功";
      }
      this.Ajax.post(methods, query).then(function(resp) {
        if (resp.IsSuccess) {
          self.MessageBox.alert(successMsg).then(action => {
            self.$router.push({
              path: "/custom"
            });
          });
        } else {
          self.Toast({
            message: resp.ErrorMessage || "操作失败，请稍后重试"
          });
        }
      });
    },

    getData() {
      var self = this;
      var guid = this.$route.query.Guid;
      if (guid) {
        var query = {
          Guid: guid
        };
        //GetmfmedByInfo
        this.Ajax.post("GetMfmedInfo", query).then((resp) => {
          var result = resp.Data;
          this.OrgName = result.Name;
          this.cusName = result.Name;
          this.Address = result.Address;
          this.LinkMan = result.LinkMan;
          this.ContactTel = result.ContactTel;

          if (result.Province) {
            this.addrvalue.push(result.Province, result.City, result.District);
          }
          if (result.OrgRank) {
            this.value2.push(result.OrgRank, result.OrgGrade);
          }
          if (result.OrgType) {
            this.customType.push(result.OrgType);
          }

          let imgStr = result.PictContent;

          if (imgStr && imgStr != "null" && imgStr != '') {
            this.imgList = JSON.parse(imgStr);
            //this.imgList.push('')
          } 
        });
      }
    },
  },

  created() {
    if(this.$route.query.Guid !== ''){
      document.title = '编辑客户资料';
    }
    this.getData();
  },

  mounted() {
    this.$nextTick(function() {
    });
  },
};
</script>